<template>
    <!-- 验证码发送 -->
   
    <el-dialog
        :close-on-click-modal="false"
        title="发送验证码"
        :visible.sync="addFormVisible"
        v-if="addFormVisible"
        width="30%"
        @close="closeDialog('addForm')"
      >
        <el-form
          :model="addForm"
          :rules="rulesReset"
          ref="addForm"
          label-width="140px"
          label-position="left"
          style="50%"
        > 
  
        <el-form-item  prop="type" label="选择发送方式" label-width="100" class="wid-9" v-if="active===0">   
            <el-radio-group v-model="addForm.type"  > 
              <el-radio  :label="0">手机</el-radio>
              <el-radio  :label="1" :disabled="userInfo.userType == '00' || userInfo.userType=='03'?true:false">邮箱</el-radio>
            </el-radio-group> 
            <el-button
              type="primary" 
              @click="getCode"
              style="margin-left: 30px;"
            >
             发送
            </el-button>
        </el-form-item>
        <el-form-item  label-width="80"  v-if="active==1" > 
          <!-- label="验证码"    -->
          <div style="display: flex; justify-content: center;"> 
            <el-input 
              v-model="addForm.code" 
              placeholder="输入验证码"
              :maxlength="6"
              style="width: 220px; margin: 0 10px; "  
            ></el-input>
            <el-button
              type="primary"
              @click="getCode()"
              :disabled="countdown > 0"
            >
              {{ countdown > 0 ? `重新发送(${countdown})` : "获取验证码" }}
            </el-button>
          </div>
           
          </el-form-item> 
        </el-form>
        <div slot="footer" class="dialog-footer"> 
          <el-button size="small" @click="active=0" v-if="active==1">返回</el-button> 
          <el-button size="small" @click="closeDialog()" v-else>取消</el-button>
          <el-button
            size="small"
            type="primary"
            :loading="loading"
            class="title"
            @click="submitFormAdd()"
            :disabled="disabled"
            v-if="active==1"
            >确定</el-button
          >
        </div>
 </el-dialog>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  spStr,
  timestampToTime,
} from "../utils/util";
import {
  baseURL,
  req,
  reqJson,
  encrypt,
  decrypt,
  reqtoken,
  service,
  format,
  getUrl,
} from "../api/axiosFun";
 
export default {
  data() {
    return { 
      loading: false,
      disabled: false,
      addFormVisible: false,  
      active:0,
      countdown:0,
      b: format,
      timestampToTime: timestampToTime, 
      addForm: {
        type: 0, 
        code:null 
      },
      userInfo:{},
     
      rulesReset: {
         
      },
 
    };
  },
  props:{
    fromType:{ //用来判断类别
      type:String,
      default:''
    }
  },
  // 注册组件
  components: {
   
  },
  computed: {
    ...mapGetters(["getUser"]), 
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal); 
    },
  }, 

  created() {
    if(this.$store.state.user){
      this.userInfo = JSON.parse(this.$store.state.user); 
      if(this.userInfo.userType == '01' || this.userInfo.userType=='02'){
        if(this.userInfo.phonenumber){
          this.addForm.type = 0
        }else{
          this.addForm.type = 1
        } 
      }
    }
    
  },
  methods: {
  
    handleReset(index, row) {
      this.resetFormVisible = true;
      this.resetForm.id = row.userId;
    }, 
    getCode(){
      // this.active==0;
      this.submitFormAdd(true);
    },
    submitFormAdd(showCode) {
      if(this.active==0||showCode){  
        this.$refs.addForm.validate((valid) => {
          if (!valid) return;
          let url = getUrl(this.addForm);
          // this.disabled = true;  
          if(this.addForm.type==0){ //手机号
            // +this.userInfo.phonenumber
            service.post("/api/code/sms").then((res) => {
              if (res.code == 0) {
                this.addForm.uuid = res.data.uuid; 
                this.$message.success("短信已发送，请注意查收");
                this.countdown = 60; 
                let intervalId = setInterval(() => {
                  if (this.countdown > 0) {
                    this.countdown--;
                  } else {
                    clearInterval(intervalId);
                  }
                }, 1000); 

                if(this.active==0){
                  this.active++;
                }
              } else  { 
                this.$message.error(spStr(res.msg, "PhotonPay", ""));
                return;
              }
            });
          }else{  //邮箱
            // +this.userInfo.email
            service.post("/api/code/sendEmail").then((res) => { 
              if (res.code == 0) { 
                this.addForm.uuid = res.data.uuid;
                this.$message.success("邮件已发送，请注意查收");
                this.countdown = 60; 
                let intervalId = setInterval(() => {
                  if (this.countdown > 0) {
                    this.countdown--;
                  } else {
                    clearInterval(intervalId);
                  }
                }, 1000);
                // this.disabled = false; 
                if(this.active==0){
                  this.active++;
                }
              } else {
                this.$message.error(spStr(res.msg, "PhotonPay", ""));
                return;
              }
            });
          } 
         
        
        });

        // this.countdown = 60; 
        // let intervalId = setInterval(() => {
        //   if (this.countdown > 0) {
        //     this.countdown--;
        //   } else {
        //     clearInterval(intervalId);
        //   }
        // }, 1000);

      }else{ 
        if(this.addForm.code.length!=6){
          return this.$message({
            message: '验证码必须为6位数',
            type: 'error'
          });
        } 
        let arr = {}  
        arr['Verify-Code'] = this.addForm.code;
        arr['Verify-Type'] = this.addForm.type;
        arr['Verify-Uuid'] = this.addForm.uuid;  
        this.countdown = 0;
        this.$emit('setParam',{...arr },this.fromType);
        this.getInfo();
        this.closeDialog("addForm"); 
      } 
    },
    getInfo() {
      service
        .get("/api/photon/getUserInfo", {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.userInfo = res.data;
            this.$store.commit("user", JSON.stringify(res.data));
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },  
 
    // 关闭编辑、增加弹出框
    closeDialog(name) {
       this.countdown = 0;
       this.active = 0;
       this.addForm = {
        type: 0, 
        code:null
       }
        this.addFormVisible = false;
        this.$emit('refresh',true);
        // this.$refs.addForm.resetFields();
    },
    openDialog(){ 
      this.addForm.code = ''
      this.addFormVisible = true
    }
 
  },
 

};
</script>
